<template>
  <view>
    <!-- 轮播图 -->
    <u-swiper :list="bannerList" :radius="0" keyName="imgUrl" height="440" circular indicator></u-swiper>
    <view class="pad30">
      <view class="row1 flex-align">
        <view></view>
        <view></view>
      </view>
      <view class="mt10 flex-align">
        日系简约风穿搭
        <view class="ml30 color-info f12">我有我风尚</view>
      </view>
    </view>
    <!-- 衣橱上新 -->
    <view class="pad30 flex-align">
      <view class="color-primary f15">衣橱上新</view>
      <view class="color-info f12 ml30">限时特惠</view>
    </view>
    <u-scroll-list indicatorColor="#DDDDDD" indicatorActiveColor="#111111">
      <navigator
        :url="`/class/goodsInfo?id=${item.clothId}`"
        hover-class="none"
        class="new-item"
        v-for="(item, index) in newList"
        :key="index"
      >
        <view class="new-con mr10 pt60">
          <view class="new flex-center f12 bg-primary">NEW</view>
          <view class="img-con ml14 mb10">
            <image :src="item.imgUrl" mode="scaleToFill" />
          </view>
          <view class="title">
            <view>SALTS</view>
            <view class="f12 color-info mt10 line1">{{ item.clothName }}</view>
          </view>
        </view>
        <view class="pad30">￥{{ item.price }}</view>
      </navigator>
    </u-scroll-list>
    <!-- banner广告 -->
    <!-- <image
      src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
      mode="scaleToFill"
      class="w mt40 mb40"
      style="height: 120rpx; display: block"
    /> -->
    <!-- 热卖好物 -->
    <view class="pad30 flex-align">
      <view class="color-primary f15">热卖好物</view>
      <view class="color-info f12 ml30">邀你心动</view>
    </view>
    <!-- 商品列表 -->
    <goodsList :list="goodsDataList" />
  </view>
</template>

<script setup lang="ts">
import goodsList from '@/components/goodsList.vue'
import homeApi from '@/api/homeApi'
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'

onShow(() => {})
onLoad(() => {
  getBannerList()
  getHotGoods()
  getNewGoods()
})

const bannerList: any = ref([])

const newList: any = ref([])
const getNewGoods = () => {
  homeApi.getNewGoods().then((res: any) => {
    newList.value = res
  })
}
const getBannerList = () => {
  homeApi.getBannerList().then((res: any) => {
    bannerList.value = res
  })
}
const goodsDataList = ref([])
const getHotGoods = () => {
  homeApi
    .getHotGoods({
      userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
    })
    .then((res: any) => {
      goodsDataList.value = res
    })
}
</script>
<style lang="scss" scoped>
// :deep(.u-scroll-list) {
//   .u-scroll-list__indicator__line {
//     width: 92% !important;
//     border-radius: 0 !important;
//     height: 2px;
//   }
// }

.new-item {
  .new-con {
    position: relative;
    width: 340rpx;
    height: 514rpx;
    background-color: #f6f6f6;

    .title {
      margin: auto;
      width: 295rpx;
      padding: 22rpx 38rpx;
      background-color: #dfdfdf;
    }

    .new {
      position: absolute;
      top: 0;
      left: 0;
      width: 110rpx;
      height: 48rpx;
    }

    .img-con {
      image {
        width: 308rpx;
        height: 296rpx;
      }
    }
  }
}

.row1 {
  view:first-child {
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background-color: #666666;
  }

  view:last-child {
    width: 44rpx;
    height: 4rpx;
    background-color: #666666;
  }
}
</style>
